<!doctype html>
<html xmlns:th="http://www.thymeleaf.org"  class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>挑啊！</title>
<!--    <link rel="stylesheet" href="./css/font.css">-->
    <link rel="stylesheet" href="layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" href="css/login.css" th:href="@{/css/login.css}">
    <link rel="stylesheet" href="fonts/iconfonts.css" th:href="@{/fonts/iconfonts.css}">
    <!--    <link rel="stylesheet" href="./css/xadmin.css">-->
    <script type="text/javascript" src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" src="js/jquery.cookie.js" th:src="@{/js/jquery.cookie.js}"></script>
    <script type="text/javascript" src="layui/layui.js" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" src="layui/layui.all.js" th:src="@{/layui/layui.all.js}"></script>
</head>
<body class="login-bg">

<div class="login layui-anim layui-anim-up">
    <div class="message">挑啊-后台管理</div>
    <div id="darkbannerwrap"></div>
    <form method="post" action="/login" >
        <div class="container-login">
            <div class="layui-form-item">
                <input type="text" name="username" id="username" lay-verify="required" placeholder="用户名" class="layui-input" />
            </div>
            <div class="layui-form-item">
                <input type="password" name="password" id="password" lay-verify="required" placeholder="密码" class="layui-input" />
            </div>
            <div class="layui-form-item">
                <input type="checkbox" id="rememberMe" name="rememberMe" lay-skin="primary" title="记住我"> 记住我
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="loginSubmit" >登 录</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(loginSubmit)', function(data){
            var url = "/login";
            var data = $("form").serializeArray();
            // console.log($("#rememberMe")[0].checked);
            $.ajax({
                type:"post",
                url:url,
                data:data,
                success:function(result){
                    // 记住我
                    if($("#rememberMe")[0].checked){
                        $.cookie('user',$("#username").val()+'-'+$("#password").val(),{expires:7});   // 7天有效期
                    } else{
                        $.cookie('user',null);
                    }
                    // 登录成功
                    if(result.success){
                        layer.msg(
                            result.message,
                            {
                                icon:1,
                                time:1000
                            },function(){
                                location.href="/index";
                            }
                        );
                    } else{
                        layer.msg(
                            result.message,
                            {
                                icon:2,
                                time:1000
                            }
                        );
                    }
                },
                error: function(data){
                    layer.msg("网络错误！");
                }
            });
            return false;
        });
    });

    /**
     * 取出 cookie
     */
    $(function(){
        // 从cookie中获取记住的用户名和密码
        var user = $.cookie('user');
        if(typeof(user)!='undefined' && user != 'null'){
            var usernameAndPassword = user.split('-');
            $("#username").val(usernameAndPassword[0]);
            $("#password").val(usernameAndPassword[1]);
            $("#rememberMe").attr({"checked":"checked"});
        }
    })

</script>
</body>
</html>